<template>
  <div class="books-page">
    <BookDetailInfo :detail="detail" />
    <div v-if="commentList.length" class="comment-list">
      <div class="comment-title">评论列表</div>
      <block v-for="(comment, index) in commentList" :key="index">
        <CommentCard :comment="comment" />
      </block>
    </div>
    <block v-if="isLogin">
      <div class="comment-title">发表评论</div>
      <div class="comment-box">
        <textarea
          class="textarea"
          placeholder="请留下你想说的话"
          :maxlength="100"
          v-model="commentInput"
          @input="handleInput"
        />
        <div class="text-danger" v-show="showRequired">请输入评论</div>
        <div class="switch-box">
          获取当前位置
          <switch class="switch" color="#2d8cf0" @change="switchGeoLocation" />
          <span class="primary-color">{{ geoLocation }}</span>
        </div>
        <div class="switch-box">
          获取手机型号
          <switch class="switch" color="#2d8cf0" @change="switchPhone" />
          <span class="primary-color">{{ phoneModel }}</span>
        </div>
        <button class="primary-btn" @click="handleSubmit">提交评论</button>
      </div>
    </block>
    <div class="no-login primary-color" v-else>
      评论需要在个人中心先进行点击授权哦😯～
    </div>
  </div>
</template>

<script>
  import { mapActions, mapState } from 'vuex';
  import BookDetailInfo from '@/components/BookDetailInfo';
  import CommentCard from '@/components/CommentCard';
  export default {
    data() {
      return {
        isLogin: false, // 是否授权登录
        isbnCode: '',
        commentInput: '',
        geoLocation: '',
        phoneModel: '',
        showRequired: false, // 显示警告提示标语
      }
    },
    components: {
      BookDetailInfo,
      CommentCard,
    },
    async mounted () {
      this.isLogin = wx.getStorageSync('isLogin'); // 获取是否授权登陆了
      this.initData(); // 初始化数据
      this.isbnCode = this.$root.$mp.query.isbnCode;
      const { isbnCode } = this.$root.$mp.query;
      await this.getBookDetail({ // 获取图书详情
        isbnCode,
      });
      wx.showShareMenu({ withShareTicket: true }); // 展示出要分享的对象
      wx.setNavigationBarTitle({ // 设置导航标题
        title: this.detail.title,
      });
      this.getComment({ // 获取评论列表
        isbnCode: this.detail.isbnCode,
      })
    },
    onShareAppMessage () { // 分享图书详情
      const { title, isbnCode } = this.detail;
      return {
        title,
        path: `/pages/bookDetail/main?isbnCode=${isbnCode}`,
      };
    },
    methods: {
      ...mapActions('bookModule', ['getBookDetail']),
      ...mapActions('commentModule', ['addComment', 'getComment']),
      initData () {
        this.commentInput = '';
        this.geoLocation = '';
        this.phoneModel = '';
        this.showRequired = false;
      },
      handleInput (e) {
        const { value } = e.mp.detail;
        if (!value) {
          return this.showRequired = true;
        }
        this.showRequired = false;
      },
      switchGeoLocation (e) { // 获取位置信息
        const { value } = e.mp.detail;
        if (value) {
          wx.getLocation({
            type: 'wgs84',
            success: async (res) => {
              const { latitude, longitude } = res;
              wx.request({
                url: 'https://apis.map.qq.com/ws/geocoder/v1',
                data: {
                  location: `${latitude},${longitude}`,
                  key: 'REOBZ-Y7QHX-XMZ43-Z6H7F-AVV67-PEFJQ' // 腾讯地图的ak
                },
                success: (info) => {
                  const { address = '未知位置' } = info.data.result;
                  this.geoLocation = address;
                }
              })
              
            },
            fail: (err) => { // 不允许授权时
              this.geoLocation = '未知位置';
            }
          });
        } else {
          this.geoLocation = '';
          this.showRequired = false;
        }
      },
      switchPhone (e) {
        const { value } = e.mp.detail;
        if (value) {
          wx.getSystemInfo({ // 获取手机型号
            success: (res) => {
              this.phoneModel = res.model;
            },
            fail: () => {
              this.phoneModel = '未知型号';
            }
          })
        } else {
          this.phoneModel = '';
        }
      },
      async handleSubmit () {
        if (this.commentInput) {
          await this.addComment({
            openId: this.openId,
            isbnCode: this.detail.isbnCode,
            comment: this.commentInput,
            geoLocation: this.geoLocation,
            phoneModel: this.phoneModel,
            bookName: this.detail.title,
          });
          if (this.addCommentRes[1]) { // 出错了
            return false;
          }
          this.commentInput = '';
          this.getComment({
            isbnCode: this.detail.isbnCode,
          });
        } else {
          this.showRequired = true;
        }
      }
    },
    computed: {
      ...mapState('bookModule', {
        detail (state) {
          return state.bookDetail;
        }
      }),
      ...mapState('meModule', {
        openId (state) {
          return state.openId;
        }
      }),
      ...mapState('commentModule', {
        addCommentRes (state) {
          return state.addCommentRes;
        },
        commentList (state) {
          return state.commentList;
        }
      }),
    }
  }
</script>

<style lang="less" scoped>
.books-page {
  .comment-title {
    margin: 10rpx 0 0 10rpx;
    padding-left: 10rpx;
    border-left: 3px solid #2d8cf0;
    font-size: 14px;
  }
  .comment-list {
    margin-bottom: 40rpx;
  }
  .comment-box {
    margin: 10rpx 10rpx 30rpx;
    .textarea {
      padding: 10rpx;
      box-sizing: border-box; // 解决padding之后展示异常的问题
      font-size: 12px;
      height: 200rpx;
      width: 100%;
      background-color: #eee;
    }
    .text-danger {
      font-size: 12px;
      color: red;
    }
    .switch-box {
      margin-top: 30rpx;
      font-size: 13px;
      display: flex;
      align-items: center;
      color: gray;
      .switch {
        zoom: .7; // 设置switch的大小，zoom属性是进行缩放的，这里缩小0.7倍
        margin: 0 10rpx;
      }
    }
    .primary-btn {
      margin-top: 30rpx;
      font-size: 14px;
      line-height: 80rpx;
      background-color: #2d8cf0;
      color: #fff;
    }
  }
  .no-login {
    text-align: center;
    font-size: 12px;
    margin-bottom: 30rpx;
  }
}
</style>